<template>
  <div class="layout">
    <el-container class="layout-container-demo">
      <el-aside>
        <Aside :collapsed="collapsed"></Aside>
      </el-aside>
      <el-container>
        <el-header>

            <div style="flex-basis: calc(2% - 10px);margin-bottom: 10px;padding-top: 30px">
              <!-- 折叠栏 -->
              <el-icon size="30px" color="#424242" style="margin-right: 15px;" @click="()=>(collapsed = !collapsed)">
                <component :is="collapsed ? Expand : Fold"></component>
              </el-icon>

            </div>
            <div style="flex-basis: calc(18% - 10px);margin-bottom: 10px;padding-top: 10px">
              <HeaderBar></HeaderBar>
            </div>
            <div style="flex-basis: calc(80% - 10px);margin-bottom: 10px;text-align: right">
              <!-- 用户信息框 -->
              <Header></Header>
            </div>
        </el-header>
        <el-main style="background-color: #f0f2f5;--el-main-padding: 10px;">
          <TabBar></TabBar>
        </el-main>
<!--        <el-footer>-->
<!--          <Footer></Footer>-->
<!--        </el-footer>-->
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import Aside from "../../components/admin/aside/Aside.vue";
import Header from "../../components/admin/header/Header.vue";
import {Expand, Fold} from '@element-plus/icons-vue'
import {ref} from "vue";
import Footer from "../../components/admin/footer/Footer.vue";
import HeaderBar from "../../components/admin/header/HeaderBar.vue";
import TabBar from "../../components/admin/body/TabBar.vue";

const collapsed = ref<boolean>(false);
</script>

<style scoped lang="scss">
.layout {
  display: flex;
  height: 100vh;

  .el-header {
    display: flex;
    //// 强制换到一行
    flex-wrap: nowrap;
    //// 所有四周居中
    align-items: center;
    background-color: #ffffff;
    line-height: 60px;
    //text-align: center;
    border-bottom: 1px solid #e0e0e0;
  }

  .el-footer {
    background-color: #6d6969;
    line-height: 60px;
    text-align: center;
    color: #d7d0d0;
  }

  .el-aside {
    width: auto;
    overflow: hidden;
  }
}
</style>
